<template>
    <el-row>
        <el-col :span="6" v-for="(item, index) in 12" :key="index">
            <div class="charging-card">
                <div class="card-header">
                    <div class="slot" :class="{ active: activeSlot === 'A' }" @click="switchSlot('A')">
                        A枪
                    </div>
                    <div class="slot" :class="{ active: activeSlot === 'B' }" @click="switchSlot('B')">
                        B枪
                    </div>
                </div>

                <div class="card-body">
                    <div class="charger-image">
                        <img v-if="index % 2 == 0" :src="currentData.image" alt="充电桩" class="image" />
                        <img v-if="index % 2 !== 0" :src="currentData.image1" alt="充电桩" class="image" />
                        <p class="logo">
                            <img :src="logoUrl" alt="充电桩" class="image1" />
                        </p>
                        <p class="daiji">
                            <svg-icon v-if="index % 2 == 0" icon-class="daiji" />
                            <svg-icon v-if="index % 2 !== 0" icon-class="lixian" />
                        </p>
                        <p class="daiji1" v-if="index % 2 == 0">待机</p>
                        <p class="daiji1" style="color: rgb(245, 108, 108);" v-if="index % 2 !== 0">离线</p>
                        <p class="charger-type">AC</p>
                    </div>

                    <div class="card-content">
                        <div class="info-row">
                            <div class="label">编号：</div>
                            <div class="value id-number">{{ currentData.id }}</div>
                        </div>

                        <div class="info-row">
                            <div class="label">实时：</div>
                            <div class="value real-time">{{ currentData.realTime }}</div>
                        </div>

                        <div class="info-row">
                            <div class="label">电量：</div>
                            <div class="value power">{{ currentData.power }}</div>
                        </div>

                        <div class="info-row">
                            <div class="label">预计：</div>
                            <div class="value estimate">{{ currentData.estimate }}</div>
                        </div>

                        <div class="info-row">
                            <div class="label">SOC：</div>
                            <div class="value soc">{{ currentData.soc }}</div>
                        </div>

                        <div class="info-row">
                            <div class="label">车牌：</div>
                            <div class="value license-plate">{{ currentData.licensePlate }}</div>
                        </div>
                    </div>
                </div>

                <div class="card-footer">
                    <button class="btn primary"><i class="el-icon-check"></i> 启动充电</button>
                    <button class="btn secondary"><i class="el-icon-close"></i> 停止充电</button>
                    <!-- <el-dropdown @command="(command) => handleCommand(command, scope.row)" style="flex:1">
                        <el-button class="btn secondary" icon="el-icon-d-arrow-right">更多操作</el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
                                v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
                            <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
                                v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown> -->
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
    name: 'ChargingCard',
    props: {
        chargeStationList: {
            type: Array,
            default: []
        }
    },
    watch: {
        chargeStationList: {
            handler: function (val, oldVal) {
                this.stationList = val
            },
            deep: true
        },
    },
    data() {
        return {
            activeSlot: 'A',
            slotData: {
                A: {
                    id: 'ZN01P1010002',
                    realTime: '-V/ -A/ -kW',
                    power: '8.8kW·h',
                    estimate: '0分钟/–分钟',
                    soc: '0%～0%',
                    licensePlate: '京A12345',
                    image: require('@/assets/images/charging.png'), // 请根据实际路径调整
                    image1: require('@/assets/images/malfunction.png') // 请根据实际路径调整
                },
                B: {
                    id: 'ZN01P1010003',
                    realTime: '380V/ 32A/ 12kW',
                    power: '15.2kW·h',
                    estimate: '45分钟/60分钟',
                    soc: '25%～80%',
                    licensePlate: '京B67890',
                    image: require('@/assets/images/charging.png'),// 请根据实际路径调整
                    image1: require('@/assets/images/malfunction.png') // 请根据实际路径调整
                }
            },
            // logo
            logoUrl: require('@/assets/logo/logo.png'),
            // 充电桩列表信息
            stationList: [],
            // 动态切换定时器
            dynamicSwitchTimer: null
        }
    },
    computed: {
        currentData() {
            return this.slotData[this.activeSlot]
        }
    },
    methods: {
        switchSlot(slot) {
            this.activeSlot = slot
        },
        // 动态切换充电枪
        dynamicSwitching() {
            this.dynamicSwitchTimer = setInterval(() => {
                this.activeSlot = this.activeSlot == 'A' ? 'B' : 'A'
            }, 3000);
        },
        // 停止切换充电枪
        stopDynamicSwitching() {
            if (this.dynamicSwitchTimer) {
                clearInterval(this.dynamicSwitchTimer);
            }
        }
    }
}
</script>

<style scoped>
.charging-card {
    width: 400px;
    background: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 12px;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
    line-height: 1.4;
    margin-bottom: 15px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.slot {
    font-weight: 600;
    font-size: 15px;
    color: #909399;
    padding: 8px 16px;
    background: #f5f7fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    flex: 1;
    text-align: center;
    margin: 0 4px;
}

.slot:first-child {
    margin-left: 0;
}

.slot:last-child {
    margin-right: 0;
}

.slot:hover {
    background: #ebedf0;
    transform: translateY(-1px);
}

.slot.active {
    background: #409eff;
    color: #ffffff;
    border-color: #409eff;
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
}

.card-body {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

/* 充电桩信息 */
.charger-image {
    /* width: 100px;
    height: 120px; */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    overflow: hidden;
    position: relative;
}

.image {
    width: 101px;
    height: 165px;
    object-fit: contain;
}

.logo {
    position: absolute;
    top: 0px;

    .image1 {
        width: 20px;
        height: 19px;
    }
}

.daiji {
    position: absolute;
    top: 30px;
}

.daiji1 {
    position: absolute;
    top: 60px;
    font-size: 10px;
    color: rgb(226, 167, 89);
}

.charger-type {
    position: absolute;
    top: 80px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;

}

/* 充电桩信息 */

.card-content {
    flex: 1;
}

.info-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    min-height: 20px;
}

.label {
    width: 52px;
    color: #606266;
    font-weight: 400;
    flex-shrink: 0;
}

.value {
    color: #303133;
    font-weight: 500;
}

.id-number {
    color: #409eff;
    letter-spacing: 0.5px;
}

.real-time {
    color: #909399;
}

.power {
    color: #67c23a;
    font-weight: 600;
}

.estimate {
    color: #e6a23c;
}

.soc {
    color: #f56c6c;
}

.license-plate {
    min-height: 18px;
    color: #303133;
}

.card-footer {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.btn {
    flex: 2;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.btn.primary {
    background: #409eff;
    color: #ffffff;
}

.btn.primary:hover {
    background: #66b1ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
}

.btn.secondary {
    background: #f5f7fa;
    color: #606266;
    border: 1px solid #dcdfe6;
}

.btn.secondary:hover {
    background: #f0f2f5;
    border-color: #c0c4cc;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn:active {
    transform: translateY(0);
}
</style>